<template>
  <div class="task-adder">
    <div class="trigger" v-show="!canShowEditor">
      <button class="button btn-add-task" @click="showEditor">
        <span>+</span>
      </button>
    </div>

    <div class="editor" @blur="canShowEditor=false" v-show="canShowEditor">
      <div class="line">
        <input @blur="canShowEditor=false" class="task-input" type="text" ref="taskInput" v-focus>
      </div>
      <div class="line">
        <button class="button" style="margin-top: 5px;">确认</button>
      </div>
    </div>
  </div>
</template>

<script>

    const focus = {
        props: {
            project_id: Number
        },
        inserted(el) {
            console.log(el);
            el.focus();
        },
    };

    export default {
        name: "task-adder",
        directives: {focus},
        data () {
            return {
                canShowEditor: false
            }
        },
        methods: {
            showEditor: function () {
                this.canShowEditor = true;
            }
        },
    }
</script>

<style scoped>
  .task-adder {
    position: relative;
    padding: 5px;
    margin: 2px 0;
  }

  .btn-add-task {
    border: 1px dashed #ccc;
    width: 100%;
    height: 40px;
    color: #a2a2a2;
  }

  .task-input {
    height: 30px;
    padding: 0 5px;
    width: 100%;
    box-sizing: border-box;
  }
</style>
